<template>
  <div>
    <el-carousel
      :interval="interval"
      :height="srcHight"
      class="img-carousel"
      arrow="always"
      indicator-position="outside"
    >
      <el-carousel-item v-for="(item, index) in carouselImgList" :key="index">
        <el-image :src="item.url" fit="fill">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- <el-row :gutter="30">
      <el-col :md="15" :sm="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span class="panel-title home-title">{{
              $t('m.Other_OJ_Contest')
            }}</span>
          </div>
          <vxe-table
            border="inner"
            highlight-hover-row
            stripe
            :loading="loading.recentOtherContestsLoading"
            auto-resize
            :data="otherContests"
            @cell-click="goOtherOJContest"
          >
            <vxe-table-column
              field="oj"
              :title="$t('m.Recent_Contest')"
              min-width="150"
              show-overflow
              header-align="center"
            >
              <template v-slot="{ row }">
                <span>[{{ row.oj }}] {{ row.title }}</span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="beginTime"
              :title="$t('m.Contest_Time')"
              show-overflow
              min-width="150"
              align="center"
            >
              <template v-slot="{ row }">
                <span
                  >{{ row.beginTime | localtime }} ~
                  {{ row.endTime | localtime }}</span
                >
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
      <el-col :md="9" :sm="24">
        <Announcements></Announcements>
        <el-card class="card-top">
          <div slot="header" class="clearfix">
            <span class="panel-title home-title">{{
              $t('m.Recent_7_Days_AC_Rank')
            }}</span>
          </div>
          <vxe-table
            border="inner"
            stripe
            auto-resize
            align="center"
            :data="recentUserACRecord"
            max-height="500px"
            :loading="loading.recent7ACRankLoading"
          >
            <vxe-table-column type="seq" min-width="50">
              <template v-slot="{ rowIndex }">
                <span :class="getRankTagClass(rowIndex)"
                  >{{ rowIndex + 1 }}
                </span>
                <span :class="'cite no' + rowIndex"></span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="username"
              :title="$t('m.Username')"
              min-width="200"
              align="left"
            >
              <template v-slot="{ row }">
                <avatar
                  :username="row.username"
                  :inline="true"
                  :size="25"
                  color="#FFF"
                  :src="row.avatar"
                  class="user-avatar"
                ></avatar>
                <a
                  @click="goUserHome(row.username, row.uid)"
                  style="color:#2d8cf0;"
                  >{{ row.username }}</a
                >
                <span style="margin-left:2px" v-if="row.titleName">
                  <el-tag effect="dark" size="small" :color="row.titleColor">
                    {{ row.titleName }}
                  </el-tag>
                </span>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="ac"
              :title="$t('m.AC')"
              min-width="50"
              align="left"
            >
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
    </el-row> -->

    <div class="messageBox container">
      <marqueeLeft></marqueeLeft>
    </div>

    <div class="container">
      <div class="card-list">
        <div class="match-list">
          <div class="content" v-loading="loading.recentContests">
            <div class="title">
              <div class="text">往期比赛</div>
              <div class="tabs-wrap">
                <div
                  class="tab first"
                  :class="matchTab ? 'tab-select' : ''"
                  @click="matchTabClick(true)"
                >
                  外部
                </div>
                <div
                  class="tab last"
                  :class="!matchTab ? 'tab-select' : ''"
                  @click="matchTabClick(false)"
                >
                  本站
                </div>
              </div>
            </div>
            <div
              class="match-info"
              v-for="(item, index) of contests"
              :key="index"
              @click="gotoMatch(item)"
            >
              <div class="match-name" :title="item.title">
                {{ item.title }}
              </div>
              <div class="match-time">
                {{ item.endTime | localtime }}
              </div>
            </div>
            <div class="view-all-btn" @click="gotoAllMatch" v-show="!matchTab">
              查看全部比赛
            </div>
          </div>
        </div>
        <div class="rank-list">
          <div class="w-294px">
            <div class="panel-wrap">
              <div class="top">
                <span class="rank-name">个人练习榜</span>
                <div class="tabs-wrap">
                  <div
                    class="tab first"
                    :class="rankTab ? 'tab-select' : ''"
                    @click="rankTabClick(true)"
                  >
                    本周
                  </div>
                  <div
                    class="tab last"
                    :class="!rankTab ? 'tab-select' : ''"
                    @click="rankTabClick(false)"
                  >
                    总榜
                  </div>
                </div>
              </div>
              <!-- <div class="middle">
                <div class="inner-wrap">
                  <div class="inegral-statistic-wrap">
                    <div class="key-value-wrap first">
                      <span class="key">我的排名</span>
                      <div class="value">
                        <span class="rank-val"
                          >{{ rankDetail.recordSum }}题</span
                        >
                      </div>
                    </div>
                    <div class="rank">No.{{ rankDetail.myRanking }}</div>
                  </div>
                </div>
              </div> -->
              <div class="bottom" v-loading="loading.recent7ACRankLoading">
                <div
                  class="personal-rank-item"
                  v-for="(item, index) of recentUserACRecord"
                  :key="index"
                >
                  <div class="left">
                    <div class="rank-wrap small">
                      <div class="first" v-if="index < 3">
                        <img :src="rankStarImgs[index]" />
                      </div>
                      <span class="text" v-else>{{ index + 1 }}</span>
                    </div>
                    <div class="unit-info-wrap">
                      <div class="avatar">
                        <div
                          class="user-avatar user-avatar-link inline-block"
                          style="width: 40px; height: 40px"
                        >
                          <!-- <img
                          src="https://static-qiniu.lanqiao.cn/avatar/uid3478370-20220704-1656899490009?imageView2/1/w/40/h/40/"
                          class="user-avatar-image"
                        /> -->
                          <avatar
                            :username="item.username"
                            :inline="true"
                            :size="40"
                            color="#FFF"
                            :src="item.avatar"
                            class="user-avatar"
                          ></avatar>
                          <div class="vip-icon-container"></div>
                        </div>
                      </div>
                      <div class="unit">
                        <div :title="item.name" class="name">
                          {{ item.username }}
                        </div>
                        <div title="--" class="extra">{{ item.username }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="score">{{ item.ac }}题</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import time from '@/common/time'
import api from '@/common/api'
import {
  CONTEST_STATUS_REVERSE,
  CONTEST_TYPE_REVERSE,
} from '@/common/constants'
import { mapState, mapGetters } from 'vuex'
import Avatar from 'vue-avatar'
import myMessage from '@/common/message'
const Announcements = () => import('@/components/oj/common/Announcements.vue')
import marqueeLeft from "@/components/oj/common/marqueex";
export default {
  name: 'home',
  components: {
    Announcements,
    Avatar,
    marqueeLeft
  },
  data() {
    return {
      interval: 5000,
      otherContests: [],
      recentUserACRecord: [],
      CONTEST_STATUS_REVERSE: {},
      CONTEST_TYPE_REVERSE: {},
      contests: [],
      loading: {
        recent7ACRankLoading: false,
        recentOtherContestsLoading: false,
        recentContests: false,
      },
      carouselImgList: [
        {
          url: 'https://s1.ax1x.com/2022/05/15/ORSjyT.jpg',
        },
        {
          url: 'https://s1.ax1x.com/2022/05/15/ORp86f.jpg',
        },
      ],
      rankStarImgs: [
        'https://static.shiyanlou.com/lanqiao/frontend/dist/img/p-medal-1-small.61012f1.png',
        'https://static.shiyanlou.com/lanqiao/frontend/dist/img/p-medal-2.b7a14ad.png',
        'https://static.shiyanlou.com/lanqiao/frontend/dist/img/p-medal-3.0ce2247.png',
      ],
      srcHight: '440px',
      remoteJudgeList: [
        {
          url: 'http://acm.hdu.edu.cn',
          name: 'HDU',
          logo: require('@/assets/hdu-logo.png'),
          status: true,
        },
        {
          url: 'http://poj.org',
          name: 'POJ',
          logo: require('@/assets/poj-logo.png'),
          status: true,
        },
        {
          url: 'https://codeforces.com',
          name: 'Codeforces',
          logo: require('@/assets/codeforces-logo.png'),
          status: true,
        },
        {
          url: 'https://codeforces.com/gyms',
          name: 'GYM',
          logo: require('@/assets/gym-logo.png'),
          status: true,
        },
        {
          url: 'https://atcoder.jp',
          name: 'AtCoder',
          logo: require('@/assets/atcoder-logo.png'),
          status: true,
        },
        {
          url: 'https://www.spoj.com',
          name: 'SPOJ',
          logo: require('@/assets/spoj-logo.png'),
          status: true,
        },
      ],
      rankTab: true,
      matchTab: true,
    }
  },
  mounted() {
    let screenWidth = window.screen.width
    if (screenWidth < 768) {
      this.srcHight = '200px'
    } else {
      this.srcHight = '440px'
    }
    this.CONTEST_STATUS_REVERSE = Object.assign({}, CONTEST_STATUS_REVERSE)
    this.CONTEST_TYPE_REVERSE = Object.assign({}, CONTEST_TYPE_REVERSE)
    this.getHomeCarousel()
    // this.getRecentContests()
    this.getRecent7ACRank()
    this.getRecentOtherContests()
  },
  methods: {
    getHomeCarousel() {
      api.getHomeCarousel().then((res) => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.carouselImgList = res.data.data
        }
      })
    },

    getRecentContests() {
      this.loading.recentContests = true
      api.getRecentContests().then(
        (res) => {
          this.contests = res.data.data
          this.loading.recentContests = false
        },
        (err) => {
          this.loading.recentContests = false
        }
      )
    },
    getRecentOtherContests() {
      this.loading.recentContests = true
      api.getRecentOtherContests(1, 10).then(
        (res) => {
          this.contests = res.data.data
          this.loading.recentContests = false
        },
        (err) => {
          this.loading.recentContests = false
        }
      )
    },
    getRecent7ACRank() {
      this.loading.recent7ACRankLoading = true
      api.getRecent7ACRank().then(
        (res) => {
          this.recentUserACRecord = res.data.data
          this.loading.recent7ACRankLoading = false
        },
        (err) => {
          this.loading.recent7ACRankLoading = false
        }
      )
    },
    goContest(cid) {
      if (!this.isAuthenticated) {
        myMessage.warning(this.$i18n.t('m.Please_login_first'))
        this.$store.dispatch('changeModalStatus', { visible: true })
      } else {
        this.$router.push({
          name: 'ContestDetails',
          params: { contestID: cid },
        })
      }
    },
    goContestList(type) {
      this.$router.push({
        name: 'ContestList',
        query: {
          type,
        },
      })
    },

    goOtherOJContest(event) {
      window.open(event.row.url)
    },
    gotoMatch(item) {
      window.open(item.url)
    },
    gotoAllMatch() {
      this.$router.push({
        path: '/contest',
      })
    },
    goUserHome(username, uid) {
      this.$router.push({
        path: '/user-home',
        query: { uid, username },
      })
    },
    getDuration(startTime, endTime) {
      return time.formatSpecificDuration(startTime, endTime)
    },
    getRankTagClass(rowIndex) {
      return 'rank-tag no' + (rowIndex + 1)
    },
    rankTabClick(flag) {
      this.rankTab = flag
      this.rankTab ? this.getRecent7ACRank() : ''
    },
    matchTabClick(flag) {
      this.matchTab = flag
      this.matchTab ? this.getRecentOtherContests() : this.getRecentContests()
    },
  },
  computed: {
    ...mapState(['websiteConfig']),
    ...mapGetters(['isAuthenticated']),
  },
}
</script>
<style>
.contest-card-running {
  border-color: rgb(25, 190, 107);
}
.contest-card-schedule {
  border-color: #f90;
}
</style>
<style scoped>
/deep/.el-card__header {
  padding: 0.6rem 1.25rem !important;
}
.card-top {
  margin-top: 20px;
}
.home-contest {
  text-align: left;
  font-size: 21px;
  font-weight: 500;
  line-height: 30px;
}
.oj-logo {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgb(255, 255, 255);
  min-height: 47px;
}
.oj-normal {
  border-color: #409eff;
}
.oj-error {
  border-color: #e65c47;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.contest-card {
  margin-bottom: 20px;
}
.contest-title {
  font-size: 1.15rem;
  font-weight: 600;
}
.contest-type-auth {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 5px;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.contest-info {
  text-align: center;
}
.contest-info li {
  display: inline-block;
  padding-right: 10px;
}

/deep/.contest-card-running .el-card__header {
  border-color: rgb(25, 190, 107);
  background-color: rgba(94, 185, 94, 0.15);
}
.contest-card-running .contest-title {
  color: #5eb95e;
}

/deep/.contest-card-schedule .el-card__header {
  border-color: #f90;
  background-color: rgba(243, 123, 29, 0.15);
}

.contest-card-schedule .contest-title {
  color: #f37b1d;
}

.content-center {
  text-align: center;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.welcome-title {
  font-weight: 600;
  font-size: 25px;
  font-family: 'Raleway';
}
.contest-status {
  float: right;
}
.img-carousel {
  height: 490px;
}

@media screen and (max-width: 768px) {
  .contest-status {
    text-align: center;
    float: none;
    margin-top: 5px;
  }
  .contest-header {
    text-align: center;
  }
  .img-carousel {
    height: 220px;
    overflow: hidden;
  }
  .phone-margin {
    margin-top: 20px;
  }
}
.title .el-link {
  font-size: 21px;
  font-weight: 500;
  color: #444;
}
.clearfix h2 {
  color: #409eff;
}
.el-link.el-link--default:hover {
  color: #409eff;
  transition: all 0.28s ease;
}
.contest .content-info {
  padding: 0 70px 40px 70px;
}
.contest .contest-description {
  margin-top: 25px;
}
span.rank-tag.no1 {
  line-height: 24px;
  background: #bf2c24;
}

span.rank-tag.no2 {
  line-height: 24px;
  background: #e67225;
}

span.rank-tag.no3 {
  line-height: 24px;
  background: #e6bf25;
}

span.rank-tag {
  font: 16px/22px FZZCYSK;
  min-width: 14px;
  height: 22px;
  padding: 0 4px;
  text-align: center;
  color: #fff;
  background: #000;
  background: rgba(0, 0, 0, 0.6);
}
.user-avatar {
  margin-right: 5px !important;
  vertical-align: middle;
}
.cite {
  display: block;
  width: 14px;
  height: 0;
  margin: 0 auto;
  margin-top: -3px;
  border-right: 11px solid transparent;
  border-bottom: 0 none;
  border-left: 11px solid transparent;
}
.cite.no0 {
  border-top: 5px solid #bf2c24;
}
.cite.no1 {
  border-top: 5px solid #e67225;
}
.cite.no2 {
  border-top: 5px solid #e6bf25;
}

@media screen and (min-width: 1050px) {
  /deep/ .vxe-table--body-wrapper {
    overflow-x: hidden !important;
  }
}
</style>

<style lang="scss" scoped>
.container {
  .card-list {
    display: flex;
    justify-content: space-around;
    .rank-list {
      width: 30%;

      .panel-wrap {
        width: 100%;
        background: #fff;
        border-radius: 10px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-image: url(https://static.shiyanlou.com/lanqiao/frontend/dist/img/small-person-score.53465e9.png);
        min-height: 80vh;
        .top {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 35px 20px 0;
          width: 100%;

          .rank-name {
            font-size: 24px;
            font-weight: 500;
            color: #fff;
          }

          .tabs-wrap {
            display: flex;
            align-items: center;

            .tab {
              box-sizing: border-box;
              width: 48px;
              height: 31px;
              line-height: 31px;
              font-size: 14px;
              font-weight: 400;
              color: #fff;
              text-align: center;
              border: 1px solid #fff;
              cursor: pointer;
            }

            .first {
              border-radius: 100px 0 0 100px;
              border-right: none;
            }

            .last {
              border-radius: 0 100px 100px 0;
            }

            .tab-select {
              background: rgb(255, 255, 255);
              font-weight: 550;
              color: rgb(46, 126, 238);
            }
          }
        }

        .middle {
          box-sizing: border-box;
          width: 100%;
          padding: 0 20px;
          margin: 18px auto 20px;

          .inner-wrap {
            background: #fff;
            border-radius: 10px;

            .inegral-statistic-wrap {
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 20px;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                180deg,
                rgba(62, 81, 255, 0.2),
                rgba(62, 81, 255, 0) 48%,
                hsla(0, 0%, 100%, 0)
              );
              box-shadow: 0 2px 10px 0 rgba(230, 235, 240, 0.5);
              border-radius: 10px;

              .key-value-wrap {
                width: 100%;
                display: flex;
                align-items: center;
                overflow: hidden;

                .key {
                  font-size: 16px;
                  font-weight: 500;
                  color: #000;
                  margin-right: 12px;
                }

                .value {
                  flex: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }

              .rank {
                font-size: 20px;
                font-weight: 600;
                color: #ff5905;
              }
              .first {
                flex: 1;
              }
            }
          }
        }

        .bottom {
          width: 100%;
          padding-bottom: 5px;
          margin-top: 20%;
          .personal-rank-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 0 18px;

            .left {
              display: flex;
              align-items: center;
              flex: 1;
              overflow: hidden;

              .rank-wrap {
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;

                img {
                  max-width: 100%;
                }
              }

              .small {
                width: 28px;
                height: 32px;
              }

              .unit-info-wrap {
                display: flex;
                align-items: center;
                flex: 1;
                overflow: hidden;

                .avatar {
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                }

                .unit {
                  flex: 1;
                  overflow: hidden;

                  .name {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;
                  }

                  .extra {
                    font-size: 14px;
                    font-weight: 400;
                    color: #666;
                    margin-top: 6px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                  }
                }
              }
            }

            .score {
              font-size: 16px;
              font-weight: 500;
              color: #3e51ff;
            }
          }
        }
      }
    }

    .match-list {
      width: 65%;
      background: #fff;
      border-radius: 10px;
      min-height: 80vh;

      .content {
        width: 100%;
        height: 100%;
        padding: 20px;
        background: linear-gradient(
          180deg,
          rgba(108, 62, 255, 0.2),
          rgba(108, 62, 255, 0) 20%,
          hsla(0, 0%, 100%, 0)
        );
        border-radius: 10px;

        &:before {
          display: inline-block;
          content: '';
          width: 87px;
          height: 87px;
          border-bottom-right-radius: 87px;
          border-top-left-radius: 10px;
          position: relative;
          left: -20px;
          top: -20px;
          background: #6c3eff;
          opacity: 0.05;
        }
      }

      .title {
        margin-top: -96px;
        display: flex;

        .text {
          font-size: 24px;
          font-weight: 500;
          color: #000;
          flex: 1;
        }
        .tabs-wrap {
          display: flex;
          align-items: center;

          .tab {
            box-sizing: border-box;
            width: 48px;
            height: 31px;
            line-height: 31px;
            font-size: 14px;
            font-weight: 400;
            color: rgb(108, 62, 255);
            text-align: center;
            border: 1px solid rgb(108, 62, 255);
            cursor: pointer;
          }

          .first {
            border-radius: 100px 0 0 100px;
            border-right: none;
          }

          .last {
            border-radius: 0 100px 100px 0;
          }

          .tab-select {
            background: rgb(108, 62, 255);
            font-weight: 550;
            color: #fff;
          }
        }
      }

      .match-info {
        margin-top: 20px;
        text-decoration: none;
        cursor: pointer;

        .match-name {
          max-width: 80%;
          height: 22px;
          font-size: 18px;
          color: #333;
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .match-time {
          font-size: 14px;
          color: #999;
        }
      }

      .view-all-btn {
        display: block;
        width: 254px;
        height: 40px;
        background: #fafafa;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #999;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        margin: 5% auto;
        cursor: pointer;
      }
    }
  }
}

.messageBox {
  margin-bottom:3%;
  overflow: hidden;
}
</style>
